<template>
    <div class='page-content'>
        <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
            <div slot="top">
                <el-form label-width="90px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select v-model="status" style="width:100%" placeholder="请选择状态">
                                    <el-option label="待支付" value="1"></el-option>
                                    <el-option label="已支付" value="2"></el-option>
                                    <el-option label="已关闭(待支付状态)" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="主订单ID：">
                                <el-input v-model="order_pay_id" type="text" placeholder="请输入主订单ID" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="订单编号：">
                                <el-input v-model="order_number" type="text" placeholder="请输入订单编号" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="支付编号：">
                                <el-input v-model="wx_prepay_id" type="text" placeholder="请输入微信支付编号" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-row>
                    </el-row>
                </el-form>
            </div>
        </table-bar>
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="ID" width="70" prop="id" v-if="columns[0].show"/>
            <el-table-column label="姓名" width="80" prop="id_name" v-if="columns[1].show"/>
            <el-table-column label="订单编号" width="160" prop="order_number" v-if="columns[2].show"/>
            <el-table-column label="订单金额" width="90" prop="price" v-if="columns[3].show"/>
            <el-table-column label="父订单ID" width="90" prop="order_pay_id" v-if="columns[4].show"/>
            <el-table-column label="状态" width="100" prop="status_name" v-if="columns[5].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.status_name == '待支付'">
                        <el-tag type="info">待支付</el-tag>
                    </template>
                    <template v-if="scope.row.status_name == '已支付'">
                        <el-tag type="success">已支付</el-tag>
                    </template>
                    <template v-if="scope.row.status_name == '已关闭'">
                        <el-tag type="danger">已关闭</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="支付金额" width="90" prop="money_payed" v-if="columns[6].show"/>
            <el-table-column label="支付时间" width="140" prop="payed_at" v-if="columns[7].show"/>
            <el-table-column label="支付方式" width="100" prop="pay_type_name" v-if="columns[8].show">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 2">{{ scope.row.pay_type_name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="微信支付号" width="220" prop="wx_prepay_id" v-if="columns[9].show"/>
            <el-table-column label="账单日期" width="90" prop="last_pay_at" v-if="columns[10].show"/>
            <el-table-column label="逾期?" width="80" prop="is_expire" v-if="columns[11].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.is_expire == 1">
                        <el-tag size="mini" type="success">是</el-tag>
                    </template>
                    <template v-else>
                        <el-tag size="mini" type="danger">否</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="140" prop="create_time" v-if="columns[12].show"/>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1 && is_admin == 1">
                        <el-button type="primary" @click="payModel(scope.row)">支付</el-button>
                    </template>
                    <el-button type="danger" v-if="is_admin == 1" @click="deleteModel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-if="allpage>10">
            <el-pagination @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-size="10"
                            layout="total, prev, pager, next, jumper"
                            :total="allpage">
            </el-pagination>
        </template>
    </div>
</template>

<script>
    import {getOrderList,deleteOrder,payOrder} from '@/api/order/orderApi';
    import {isCheckAdmin} from '@/api/admin/adminApi';

export default {
    data() {
        return {
            lists: [],
            is_admin:0,
            allpage: 1,//总页数
            showItem: 5,//分页显示得中间按钮个数
            current: 1,//当前页
            status: '',
            order_pay_id:'',
            order_number:'',
            wx_prepay_id:'',
            model: {},
            columns: [
                {name: "ID", show: true},
                {name: "姓名", show: true},
                {name: "订单编号", show: true},
                {name: "订单金额", show: true},
                {name: "父订单ID", show: true},
                {name: "状态", show: true},
                {name: "支付金额", show: true},
                {name: "支付时间", show: true},
                {name: "支付方式", show: true},
                {name: "微信支付号", show: true},
                {name: "账单日期", show: true},
                {name: "逾期?", show: true},
                {name: "创建时间", show: true},
            ],
        };
    },
    created: function () {
        this.order_pay_id = this.$route.query.order_pay_id;
        this.handleCurrentChange(1);
        this.loadButtonAuth();
    },
    methods: {
        loadButtonAuth: function () {
            isCheckAdmin().then(res => {
                this.is_admin = res.data.is_admin;
            })
        },
        payModel:function(row){
            this.$confirm("您确认要对该订单进行支付操作?该操作不可逆,请谨慎操作", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                payOrder({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
        handleCurrentChange: function (index) {
            this.current = index;
            getOrderList({
                page: index,
                status: this.status,
                order_pay_id:this.order_pay_id,
                order_number:this.order_number,
                wx_prepay_id:this.wx_prepay_id,
            }).then(res => {
                this.lists = res.data.lists;
                this.allpage = res.data.allpage;
            })
        },
        reset: function () {
            this.status = '';
            this.order_pay_id = '';
            this.order_number = '';
            this.wx_prepay_id = '';
            this.handleCurrentChange(1);
        },
        search: function () {
            this.handleCurrentChange(1);
        },
        handleClose: function (done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                    .catch(_ => {
                });
        },
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout()
        },
        deleteModel: function (row) {
            this.$confirm("您确认要删除该条数据?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                deleteOrder({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
    },
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

</style>

